$(function () {
    // 各种框的状态
    var unameFlag = false, btnFlag = true, codeFlag = false, upwdFlag = false;
    // 滑动块验证
    //这是让验证按钮移动的函数
    var $yanzhengbtn = $(".yanzhengbtn");
    function drag($dom) {
        $dom.on("mousedown", function (e) {
            var disX = e.clientX - $(this).offset().left;
            $dom.parent().on("mousemove", function (e) {
                var $hideyangzhengbox = $(".hideyangzhengbox");
                $(".hideyangzhengbox").css({ "z-index": 10 });
                var $yangzhengbox = $(".yangzhengbox");
                var left = e.clientX - disX - $dom.parent().offset().left;
                if (left < 50) {
                    left = 0;
                    $hideyangzhengbox.css("left", -$hideyangzhengbox.css("width"))
                }
                if (left > $dom.parent().width() - $dom.width() - 30) {
                    left = $dom.parent().width() - $dom.width() - 2;
                    $hideyangzhengbox.css("left", 0)
                    $(this).off("mousemove");
                }
                $dom.css("left", left);
                $hideyangzhengbox.css("left", -parseInt($hideyangzhengbox.css("width")) +
                    left)
                $(document).on("mouseup", function () {
                    if (left < $dom.parent().width() / 1.25) {
                        left = 0;
                        $hideyangzhengbox.css("left", -parseInt($hideyangzhengbox
                            .css("width")));
                    } else {
                        left = $dom.parent().width() - $dom.width() - 2;
                        $hideyangzhengbox.css("left", 0)
                    }
                    $dom.css("left", left);
                    if ($dom.position().left == $dom.parent().width() - $dom
                        .width() - 1.2) {
                        $hideyangzhengbox.text("验证通过");
                        $hideyangzhengbox.css({
                            "color": "#fff",
                            "font-size": '12px'
                        });
                        var yanzhengbtn = document.querySelector(".yanzhengbtn");

                        $yanzhengbtn.text("");
                        yanzhengbtn.classList.add("succ")
                        $("#codetxt").hide();
                        btnFlag = true;
                    }
                    $dom.parent().off("mousemove");
                    $dom.parent().off("mouseup");
                })
            })
        })
    }
    drag($yanzhengbtn);

    $.idcode.setCode();   //加载生成验证码方法


    //用户名注册验证
    var $username = $(".username");//用户名输入框
    //失去焦点判断手机号或邮箱是否合法
    $username.on("blur", function () {
        $unameval = $username.val();//这是用户名输入的值
        const reg1 = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/
        const reg2 = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        //如果为空
        if ($unameval == "") {
            $(".unameTxt").addClass("uname-error").removeClass("uname-succe");
            $(".unameTxt").text("请填写手机号~");
        }
        //如果不符合正则
        else if (!($unameval.match(reg1) || $unameval.match(reg2))) {
            $(".unameTxt").addClass("uname-error").removeClass("uname-succe");;
            $(".unameTxt").text("请输入正确的手机号或邮箱号~");
        } else {
            $(".unameTxt").addClass("uname-succe").removeClass("uname-error");
            $(".unameTxt").text("用户名可使用~");
            $.ajax({
                url: "../../api/isuname",
                data: {
                    uname: $(".username").val(),
                },
                dataType: "json",
                type: "post"
            }).then((data) => {
                console.log(data)
                if (data.status == -1) {
                    $(".unameTxt").addClass("uname-error").removeClass("uname-succe");;
                    $(".unameTxt").text("用户已存在~");
                    unameFlag = false;
                } else {
                    $(".unameTxt").addClass("uname-succe").removeClass("uname-error");
                    $(".unameTxt").text("用户名可注册~");
                    unameFlag = true;
                }
            })
            unameFlag = true;
        }

    })
    //密码框注册验证
    var $userpwd = $(".userpwd");
    $userpwd.on("blur", function () {
        $upwdval = $userpwd.val();
        const reg1 = /^(?=.*\d)(?=.*[a-zA-Z]).{5,20}$/
        //如果为空
        if ($upwdval == "") {
            $('.upwdTxt').addClass("uname-error").removeClass("uname-succe");
            $(".upwdTxt").text("请输入密码");
        }
        //判断符不符合正则
        else if (!($upwdval.match(reg1))) {
            $('.upwdTxt').addClass("uname-error").removeClass("uname-succe");
            $(".upwdTxt").text("密码应在5-20位,至少一位字母和数字");
        } else {
            $(".upwdTxt").addClass("uname-succe").removeClass("uname-error");
            $(".upwdTxt").text("密码可使用~");
            upwdFlag = true;
        }
    })
    //表单提交
    $("#butn").on("click", function () {
        if (btnFlag == false) {
            $(".btnTxt").addClass("uname-error");
            $(".btnTxt").text("请进行滑块验证~~");
        } else {
            $(".btnTxt").removeClass("uname-error");
            $(".btnTxt").text("");
        }
        var IsBy = $.idcode.validateCode();
        if (!(IsBy)) {
            $(".codeTxt").addClass("uname-error").removeClass('uname-succe');
            $(".codeTxt").text("验证码输入错误!");
            return;
        } else {
            $(".codeTxt").text("");
            $(".codeTxt").removeClass("uname-error");
            codeFlag;
            if (unameFlag && btnFlag && upwdFlag) {
                $.ajax({
                    url: "../../api/reg",
                    data: {
                        uname: $(".username").val(),
                        upwd: $(".userpwd").val()
                    },
                    dataType: "json",
                    type: "post"
                }).then((data) => {
                    if (data.status == 1) {
                        var userObj = {
                            uname: $(".username").val(),
                            upwd: $(".userpwd").val(),
                        };
                        $.cookie("userinfo",JSON.stringify(userObj),9999)
                        layer.msg("注册成功~");
                        window.location = "./transition.html";
                        $("input").val("");
                        $(".reqTxt").hide();
                    } else {
                        layer.msg("注册失败~");
                    }
                })
            } else {
                layer.msg("请填写完整信息!")
            }
        }
        return false;
    })
})